<template>
  <el-col :span="span || 6">
    <el-form-item
      :label="label"
      :label-width="labelwidth || '120px'"
      :prop="prop"
      :class="searchFrom ? 'searchFrom' : ''"
    >
      <el-date-picker
        size="small"
        v-model="dateVal"
        :type="type"
        :placeholder="'请选择' + label"
        :value-format="valueFormat"
        :disabled="disabled"
        start-placeholder="开始日期"
        range-separator="至"
        end-placeholder="结束日期"
        :style="{ width: selectWidth }"
        @change="onChange"
      />
    </el-form-item>
  </el-col>
</template>

<script>
// other

export default {
  name:"BaseFormDatePicker",
  props:{
    label:{
      type:String,// form label 标题
    },
    prop:{
      type:String,// form prop 属性
    },
    span:{
      type:Number,// el-col 宽度
    },
    type:{
      type:String,// 时间选择类型
    },
    ph:{
       type:String,  // 输入框占位文本
    },
    searchFrom:{
      type:Boolean, // 是否是搜索
    },
    disabled:{
      type:Boolean, // 禁用
    },
    valueFormat:{
      type: String,
      default: "yyyy-MM-dd" // 日期格式
    },
    labelwidth:{
      type: String,
      default: "130px" // label 标题 宽度
    },
    selectWidth:{
      type: String,
      default: "100%" //宽度
    }

  },
  data() {
    return {
      value:"",
      dateVal:"",
    }
  },
  methods: {
     onChange(val) {
       this.$emit("input",val)
    }
  },

}
</script>

<style lang="scss">
.searchFrom {
  display: flex !important;
  .el-form-item__label-wrap {
    flex: 0 0 4.3em;
  }
  .el-date-editor {
    width: auto !important;
    max-width: 217px;
  }
}
</style>
